import 'package:flutter/material.dart';
import '../animations/animation_config.dart';

/// 骨架屏组件
/// 用于显示内容加载时的占位效果，提供局部化反馈
class SkeletonWidget extends StatefulWidget {
  const SkeletonWidget({
    super.key,
    this.width = double.infinity,
    this.height = 16,
    this.borderRadius = 4,
    this.child,
    this.enabled = true,
  });
  
  /// 宽度
  final double width;
  
  /// 高度
  final double height;
  
  /// 圆角半径
  final double borderRadius;
  
  /// 自定义子组件形状
  final Widget? child;
  
  /// 是否启用骨架屏效果
  final bool enabled;

  @override
  State<SkeletonWidget> createState() => _SkeletonWidgetState();
}

class _SkeletonWidgetState extends State<SkeletonWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationConfig.createController(
      vsync: this,
      duration: AnimationConfig.shimmer,
    );
    _animation = AnimationConfig.createShimmerAnimation(_controller);
    
    if (widget.enabled) {
      _controller.repeat();
    }
  }

  @override
  void didUpdateWidget(SkeletonWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.enabled != oldWidget.enabled) {
      if (widget.enabled) {
        _controller.repeat();
      } else {
        _controller.stop();
      }
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!widget.enabled) {
      return widget.child ?? SizedBox(width: widget.width, height: widget.height);
    }

    final colorScheme = Theme.of(context).colorScheme;
    final shimmerColors = [
      colorScheme.surfaceVariant.withOpacity(0.6),
      colorScheme.surfaceVariant.withOpacity(0.3),
      colorScheme.surfaceVariant.withOpacity(0.6),
    ];

    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: widget.width,
          height: widget.height,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(widget.borderRadius),
            gradient: LinearGradient(
              colors: shimmerColors,
              stops: const [0.0, 0.5, 1.0],
              begin: Alignment(-1.0 + _animation.value * 2, 0),
              end: Alignment(-0.5 + _animation.value * 2, 0),
            ),
          ),
          child: widget.child,
        );
      },
    );
  }
}

/// 预定义的骨架屏组件
class SkeletonShapes {
  
  /// 文本行骨架屏
  static Widget textLine({
    double width = double.infinity,
    double height = 16,
    bool enabled = true,
  }) {
    return SkeletonWidget(
      width: width,
      height: height,
      borderRadius: 2,
      enabled: enabled,
    );
  }
  
  /// 圆形头像骨架屏
  static Widget avatar({
    double size = 40,
    bool enabled = true,
  }) {
    return SkeletonWidget(
      width: size,
      height: size,
      borderRadius: size / 2,
      enabled: enabled,
    );
  }
  
  /// 卡片骨架屏
  static Widget card({
    double width = double.infinity,
    double height = 120,
    bool enabled = true,
  }) {
    return SkeletonWidget(
      width: width,
      height: height,
      borderRadius: 12,
      enabled: enabled,
    );
  }
  
  /// 按钮骨架屏
  static Widget button({
    double width = 120,
    double height = 40,
    bool enabled = true,
  }) {
    return SkeletonWidget(
      width: width,
      height: height,
      borderRadius: 8,
      enabled: enabled,
    );
  }
  
  /// 图片骨架屏
  static Widget image({
    double width = double.infinity,
    double height = 200,
    bool enabled = true,
  }) {
    return SkeletonWidget(
      width: width,
      height: height,
      borderRadius: 8,
      enabled: enabled,
    );
  }
}

/// 复合骨架屏布局组件
class SkeletonLayouts {
  
  /// 列表项骨架屏
  static Widget listItem({
    bool showAvatar = true,
    bool showSecondaryText = true,
    bool showAction = false,
    bool enabled = true,
  }) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Row(
        children: [
          if (showAvatar) ...[
            SkeletonShapes.avatar(enabled: enabled),
            const SizedBox(width: 12),
          ],
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SkeletonShapes.textLine(
                  width: double.infinity,
                  height: 18,
                  enabled: enabled,
                ),
                if (showSecondaryText) ...[
                  const SizedBox(height: 8),
                  SkeletonShapes.textLine(
                    width: 200,
                    height: 14,
                    enabled: enabled,
                  ),
                ],
              ],
            ),
          ),
          if (showAction) ...[
            const SizedBox(width: 12),
            SkeletonShapes.button(
              width: 60,
              height: 32,
              enabled: enabled,
            ),
          ],
        ],
      ),
    );
  }
  
  /// 文章卡片骨架屏
  static Widget articleCard({
    bool showImage = true,
    bool enabled = true,
  }) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (showImage) ...[
              SkeletonShapes.image(height: 150, enabled: enabled),
              const SizedBox(height: 12),
            ],
            SkeletonShapes.textLine(
              height: 20,
              enabled: enabled,
            ),
            const SizedBox(height: 8),
            SkeletonShapes.textLine(
              width: 250,
              height: 16,
              enabled: enabled,
            ),
            const SizedBox(height: 8),
            SkeletonShapes.textLine(
              width: 180,
              height: 14,
              enabled: enabled,
            ),
            const SizedBox(height: 16),
            Row(
              children: [
                SkeletonShapes.avatar(size: 24, enabled: enabled),
                const SizedBox(width: 8),
                SkeletonShapes.textLine(
                  width: 80,
                  height: 14,
                  enabled: enabled,
                ),
                const Spacer(),
                SkeletonShapes.textLine(
                  width: 60,
                  height: 14,
                  enabled: enabled,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
  
  /// 个人资料骨架屏
  static Widget profile({bool enabled = true}) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          SkeletonShapes.avatar(size: 80, enabled: enabled),
          const SizedBox(height: 16),
          SkeletonShapes.textLine(
            width: 150,
            height: 20,
            enabled: enabled,
          ),
          const SizedBox(height: 8),
          SkeletonShapes.textLine(
            width: 200,
            height: 16,
            enabled: enabled,
          ),
          const SizedBox(height: 24),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(
              3,
              (index) => Column(
                children: [
                  SkeletonShapes.textLine(
                    width: 40,
                    height: 18,
                    enabled: enabled,
                  ),
                  const SizedBox(height: 4),
                  SkeletonShapes.textLine(
                    width: 60,
                    height: 14,
                    enabled: enabled,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}